<template>
  <Teleport to="body">
    <div class="dialog">
      <a-modal
        :open="true"
        :title="title"
        @ok="handleOk(true)"
        @cancel="handleOk(false)"
      >
        <a-form
          ref="diglogForm"
          :model="formState"
          style="margin-top: 20px"
          name="basic"
          :label-col="{ span: 2 }"
          :wrapper-col="{ span: 20 }"
          :rules="rules"
        >
          <a-form-item label="序号" v-if="title === '修改表格数据'">
            <a-input
              class="input-dialog"
              v-model:value="formState.id"
              :disabled="true"
            />
          </a-form-item>
          <a-form-item label="姓名" name="name">
            <a-input class="input-dialog" v-model:value="formState.name" />
          </a-form-item>
          <a-form-item label="年龄" name="age">
            <a-input class="input-dialog" v-model:value="formState.age" />
          </a-form-item>
          <a-form-item label="性别" name="sex">
            <a-select class="input-dialog" v-model:value="formState.sex">
              <a-select-option label="男" value="男" />
              <a-select-option label="女" value="女" />
            </a-select>
          </a-form-item>
          <a-form-item label="婚姻" name="family">
            <a-select class="input-dialog" v-model:value="formState.family">
              <a-select-option label="已婚" value="已婚" />
              <a-select-option label="未婚" value="未婚" />
            </a-select>
          </a-form-item>
          <a-form-item label="爱好" name="hobby">
            <div class="input-dialog">
              <a-tag
                color="cyan"
                v-for="(item, index) in formState.hobby"
                :key="index"
                >{{ item }}
                <CloseCircleOutlined
                  class="close-icon"
                  @click="deleteTag(index)"
                />
              </a-tag>
              <button class="tag-style" v-if="showAdd" @click="showAdd = false">
                +
              </button>
              <input
                type="text"
                class="tag-style"
                @blur="addTag"
                @keyup.enter="addTag"
                v-model="tag"
                v-else
              />
            </div>
          </a-form-item>
          <a-form-item label="城市" name="city">
            <a-input class="input-dialog" v-model:value="formState.city" />
          </a-form-item>
          <a-form-item label="邮箱" name="email">
            <a-input class="input-dialog" v-model:value="formState.email" />
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </Teleport>
</template>

<script>
export default {
  name: "Dialog",
};
</script>

<script setup>
import { CloseCircleOutlined } from "@ant-design/icons-vue";
import { ref } from "vue";
import { message } from "ant-design-vue";

const props = defineProps({
  title: {
    type: String,
    default: "默认标题",
  },
  data: {
    type: Object,
    default: () => {},
  },
});

const diglogForm = ref(null);

const showAdd = ref(true);

const tag = ref("");

const formState = ref(JSON.parse(JSON.stringify(props.data)));

const emit = defineEmits(["close", "changeData"]);

const validateAge = (rule, value) => {
  const age = parseInt(value);
  if (isNaN(age)) {
    return Promise.reject(new Error("年龄必须是数字"));
  } else if (age < 0 || age > 120) {
    return Promise.reject(new Error("年龄必须在0-120之间"));
  } else {
    return Promise.resolve();
  }
};

const rules = {
  id: [{ required: true, message: "请输入序号", trigger: "blur" }],
  name: [
    { required: true, message: "请输入姓名", trigger: "blur" },
    { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" },
  ],
  age: [
    {
      validator: validateAge,
      trigger: "change",
    },
    {
      required: true,
      message: "请输入年龄",
      trigger: "blur",
    },
  ],
  email: [
    { required: true, message: "请输入邮箱地址", trigger: "blur" },
    {
      type: "email",
      message: "请输入正确的邮箱地址",
      trigger: "blur",
    },
  ],
  city: [{ required: true, message: "请输入城市", trigger: "blur" }],
  family: [{ required: true, message: "请选择婚姻状况", trigger: "blur" }],
  sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
  hobby: [{ required: true, message: "请输入爱好", trigger: "blur" }],
};

const deleteTag = (index) => {
  formState.value.hobby.splice(index, 1);
};

const addTag = (value) => {
  formState.value.hobby = formState.value.hobby ? formState.value.hobby : [];
  formState.value.hobby.push(tag.value);
  tag.value = "";
  showAdd.value = true;
};

const handleOk = (boolean) => {
  if (boolean) {
    diglogForm.value
      .validate()
      .then(() => {
        emit("changeData", formState.value);
        emit("close");
      })
      .catch((e) => {
        message.warning("请输入符合规定的完整信息");
      });
  } else {
    emit("close");
  }
};
</script>

<style lang="scss" scoped>
.tag-style {
  border-radius: 5px;
  border: solid 1px #00a4ff;
  font-size: 12px;
  color: #00a4ff;
  outline: #00a4ff;
}
.input-dialog {
  margin-left: 3%;
}
</style>